<script setup>
	import { computed, ref } from 'vue'
	import { designStore } from '@/views/plugin/dashboard/store'

	const useDesignStore = designStore()
	// 拖拽记录 拖拽的元素
	const dragstart = (item) => {
		useDesignStore.activeDragAddItem = item
	}

	// 当前选中的Tab
	const activeKey = ref('display')

	// 所有组件列表
	const allComponentsList = computed(() => {
		return useDesignStore.componentsConfigList
	})

	// 展示组件列表 - 数据展示类组件
	const displayComponents = computed(() => {
		return allComponentsList.value.filter((item) => {
			// 数据展示类组件，如图表、卡片、表格等
			return [
				'DataCard',
				'TableCard',
				'ListCard',
				'Calendar',
				'ImageTextCard',
				'ImageChartCard',
				'IframeCard',
				'IframeChartCard',
				'WeatherCard',
				'LineChart',
				'BarChart',
				'AreaChart',
				'PieChart',
				'DonutChart',
				'LiquidChart',
				'GaugeChart',
				'UserInfoCard',
				'Carousel',
				'SpeedyCard',
				'RankCard'
			].includes(item.type)
		})
	})

	// 布局组件列表 - 布局类组件
	const layoutComponents = computed(() => {
		return allComponentsList.value.filter((item) => {
			// 布局类组件，如容器、轮播、标签页等
			return ['TabLayout', 'GridLayout', 'FlexLayout', 'CardLayout', 'SplitLayout'].includes(item.type)
		})
	})

	// 根据当前选中的Tab返回对应的组件列表
	const componentsList = computed(() => {
		return activeKey.value === 'display' ? displayComponents.value : layoutComponents.value
	})
</script>

<template>
	<div class="component-tabs">
		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane key="display" tab="展示组件"></a-tab-pane>
			<a-tab-pane key="layout" tab="布局组件"></a-tab-pane>
		</a-tabs>

		<div
			class="flex flex-wrap px-[10px] border-t justify-between overflow-y-auto h-[calc(100% - 94px)] content-start"
			style="height: calc(100% - 94px)"
		>
			<div
				draggable="true"
				v-for="(item, index) in componentsList"
				@dragstart="dragstart(item)"
				:key="index"
				class="box"
			>
				<div class="title">{{ item.title }}</div>
				<div class="p-[10px]">
					<div class="h-[94px] overflow-hidden preview">
						<component
							:is="item.name"
							:config="item.config"
							class="origin-top-left"
							:style="{
								width: `${item.showW || '100%'}`,
								height: `${item.showH || '100%'}`,
								transform: `scale(${item.showS || 1})`,
								boxShadow: 'none !important'
							}"
						/>
					</div>
				</div>
			</div>

			<div v-if="componentsList.length === 0" class="empty-message">
				<a-empty description="暂无组件" />
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	.component-tabs {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.box {
		cursor: pointer;
		width: calc(50% - 5px);
		height: 150px;
		border: 1px solid #eeeff0;
		border-radius: 2px;
		margin-top: 10px;
	}

	.box .title {
		background: #f5f6f7;
		font-size: 14px;
		font-weight: 500;
		padding: 0 10px;
		display: flex;
		align-items: center;
		height: 36px;
	}

	.border-t {
		border-top: 1px solid #eeeff0;
	}

	:deep(.ant-card:not(.ant-card-bordered)) {
		box-shadow: none;
	}

	.preview {
		position: relative;
	}

	.preview::before {
		display: block;
		content: '';
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.empty-message {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40px 0;
	}

	:deep(.ant-tabs-nav) {
		margin-bottom: 0;
		padding: 0 10px;
	}
</style>
